{% block js %}
  <script type="text/javascript">
    var initial_states = {
      userLogged: {% if user_email -%} true {%- else -%} false {%- endif %}
    };
  </script>
{% endblock %}
<div class="row heading">
	<div class="small-12 title-heading">
		<h1 class="bold">{{astroboxName}} · File Manager</h1>
	</div>
</div>

<div class="file-upload-view">
	<div class="row upload-buttons">
		<div class="small-12 medium-7 large-4 medium-centered columns">
			<span class="file-upload-button button radius expand" style="margin-bottom: 10px">
				<i class="icon-plus"></i><b>Add files</b> <span>(<span class="extensions"></span>)</span>
				<input class="file-upload" type="file" name="file" accept="">
			</span>
		</div>
	</div>
	<div class="row upload-progress" style="display:none">
		<div class="small-12 large-10 large-centered columns">
			<div class="progress radius">
				<div class="meter" style="width: 0%"></div>
			</div>
			<div class="progress-message" align="center">
				<i class="icon-rocket-spinner animate-spin"></i> <span></span>
			</div>
		</div>
	</div>
</div>

<hr/>

<div class="design-list">
	<div class="row list-header">
		<div class="small-12 medium-12 large-7 columns sync-container">
			{%- if user_email %}
				<div class="loading-button sync">
					<button class="tiny success radius sync round"><i class="icon-refresh"></i> <div>Sync</div></button>
					<span class="tiny success button radius round disabled loading"><i class="icon-refresh animate-spin"></i> <div>Sync</div></span>
				</div>
      {%- else %}
        <div class="loading-button sync no-user">
          <button class="tiny success radius sync round"><i class="icon-refresh"></i> <div>Sync</div></button>
          <span class="tiny success button radius round disabled loading"><i class="icon-refresh animate-spin"></i> <div>Sync</div></span>
        </div>
      {%- endif %}

      <h3 class="bold show-for-medium-up printablefiles-message">Printable Files</h3>
		</div>
		<div class="small-12 medium-12 large-5 columns">
			<ul class="button-group even-3 storage">
        <li><a href="#" class="button tiny round bold secondary USB">External</a></li>
			  <li><a href="#" class="button tiny round bold secondary local">Internal</a></li>
			  <li><a href="#" class="button tiny round bold secondary cloud">Cloud</a></li>
			</ul>
    </div>
    {%- if user_email  %}
      <div id="files-on-queue" class="text-right small-12 columns" >
        <a href="#print-queue"> <div><small class="bold" >Go to Queue</small><i class="icon-inbox"><span class="counter-queue bold"></span></i></div></a>
      </div>
    {%- endif %}
	</div>

	<div class="row">
		<div class="small-12 columns matching-container">
      <div class="local-loading" align="center">
        <i class="icon-refresh animate-spin"></i>
        Loading files...
      </div>
      <div id="files-container">
        {%- if printer_profile.printer_model.id %}
        <div class="design-filtered-list">
          <div class="header-filter" >Matching your <i class="icon-3d-printer"></i> <b><span class="printer-name" >{{printer_profile.printer_model.name}}</span></b></div>
          <div class="container-files"></div>
        </div>
        {% endif %}
        <div class="design-list">
          <div class="header-filter unmatch" >{%- if printer_profile.printer_model.id %} Not matching your <i class="icon-3d-printer"></i> <b><span class="printer-name" >{{printer_profile.printer_model.name}}</span></b> {% endif %}</div>
          <div class="container-files"></div>
        </div>
      </div>

		</div>
	</div>
</div>

<div id="print-file-info" class="reveal-modal xlarge" data-reveal>
	<div class="dlg-content"></div>
	<a class="close-reveal-modal">&#215;</a>
</div>

<div id="external-removed-warning-dlg" class="reveal-modal" data-reveal>
  <div class="dlg-content">
    <h2 class="bold">Eject Before Removing</h2>
    <div class="modal-content" align="center">
      <i class="icon-attention"></i>
      <p>Please use the Eject option before physically removing the external drive to avoid loss of data or corruption.</p>
    </div>
    <div class="row">
      <div class="columns small-12 medium-6 large-4 medium-centered">
        <button class="close radius">Ok, got it</button>
      </div>
    </div>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

<script type="text/template" id="printfile-info-template">
  <h2 class="bold"><%= p.printFileName ? _.escape(p.printFileName) : _.escape(p.name) %></h2>
	<div class="modal-content">
		<div class="row">
			<% if (p.images.square) { %>
				<div class="small-12 medium-5 large-4 columns">
					<div class="photo-container">
						<img src="<%= p.images.square %>"/>
					</div>
				</div>
			<% } %>
			<div class="small-12<%= p.images.square ? ' medium-7 large-8' : '' %> columns">
				<div class="actions">
					<% if (p.local_filename) { %>
						<div class="loading-button">
							<a class="remove idle" href="#">
								<i class="icon-trash with-separator" title="Remove from {{mfDefinition.variant.product_name}}"></i>
							</a>
							<span class="loading"><i class="icon-rocket-spinner animate-spin"></i></span>
						</div>
					<% } else { %>
						<a class="download" href="#">
							<i class="icon-download-cloud" title="Download to {{mfDefinition.variant.product_name}}"></i>
						</a>
          <% } %>
          <% if (!p.local_only && queueAllowed) { %>
            <a class="queue" href="#">
              <i class="icon-plus" title="Add to Queue"></i>
            </a>
          <% } %>
          <a class="print" href="#">
            <i class="icon-3d-printer" title="Print"></i>
          </a>
				</div>
				<div class="print-settings">
					<% if (p.local_only) { %>
						This file is <b>only</b> stored on this {{mfDefinition.variant.product_name}}
					<% } else { %>
						<% if (p.printer) { %><a class="success label round" href="<%= p.printer.info_link %>" target="_astroprint"><%= p.printer.name %> <i class="icon-link-ext"></i></a>
						/<% } %>
						<% if (p.material) { %><a class="success label round"href="<%= p.material.info_link %>" target="_astroprint"><%= p.material.name %> <i class="icon-link-ext"></i></a>
						/<% } %>
            <% if (p.settings) { %>
              <% if (p.settings.info_link) { %>
                <a class="success label round" href="<%= p.settings.info_link %>" target="_astroprint"><%= p.settings.name %> <i class="icon-link-ext"></i></a>
              <% } else { %>
                <span class="success label round"><%= p.settings.name %></span>
              <% } %>
            <% } %>
				  <% } %>
				</div>
				<div class="print-info">
					<% if (p.info) { %>
            <% if (p.info.print_time) { %>
              <h4 class="bold hl"><i class="icon-stopwatch"></i> <%= time_format(p.info.print_time) %></h4>
            <% } %>
            <% if (p.info.filament_volume) { %>
              <b>Filament Used:</b> <span class="hl"><%= p.info.filament_volume ? (p.info.filament_volume/1000).toFixed(2) : '--' %></span> cm<sup>3</sup> / <span class="hl"><%= p.info.filament_length ? (p.info.filament_length/10).toFixed(2) : '--' %></span> cm<br/>
            <% } %>
						<% if (p.info.size) { %>
							<b>Model Size:</b> <span class="hl"><%= p.info.size.x.toFixed(2) %></span> x <span class="hl"><%= p.info.size.y.toFixed(2) %></span> x <span class="hl"><%= p.info.size.z.toFixed(2) %></span> mm<br/>
						<% } %>
						<% if (p.info.layer_height) { %>
							<b>Layer Height:</b> <span class="hl"><%= p.info.layer_height %></span> mm<br/>
						<% } %>
						<% if (p.info.layer_count) { %>
							<b>Number of Layers:</b> <span class="hl"><%= p.info.layer_count %></span><br/>
						<% } %>
          <% } else { %>
            <% if (p.local_filename != null) { %>
            <i class="icon-rocket-spinner animate-spin"></i> Analyzing G-Code
            <% } %>
					<% } %>
				</div>
			</div>
		</div>
	</div>
</script>

<script type="text/template" id="print-file-template">
	<div class="small-3 medium-2 large-1 columns left-section">
		<% if (p.images.thumbnail) { %>
			<div class="thumb-container">
				<img src="<%= p.images.thumbnail %>"/>
			</div>
		<% } else { %>
      <!--i class="icon-3d-object"></i-->
      <div class="thumb-container">
        <img class="noimage" src="/img/noimage.svg">
      </div>
		<% } %>
	</div>
	<div class="small-9 medium-8 large-9 columns middle-section">
    <div class="info-container div-container">
      <h3 class="bold text"> <%= _.escape(p.name) %></h3>
      <div class="info">
        <%= size_format(p.size) %>
        <% if (p.info) { %>
          <% if (p.info.print_time) { %>
            <b><span>·</span><i class="icon-stopwatch" title="Print Time"></i> <%= time_format(p.info.print_time) %></b>
          <% } %>
        <% } else { %>
          <% if (p.local_filename != null) { %>
          <i class="icon-rocket-spinner animate-spin"></i> Analyzing G-Code
          <% } %>
        <% } %>
        <% if (p.uploaded_on) { %>
          <b><span> ·</span></b><i class="icon-calendar" title="Time Added"></i> <span data-localtime-format="d MMM, yyyy (h:mm a)"><%= new Date(p.uploaded_on * 1000).toISOString() %></span>
        <% } %>
      </div>
    </div>
	</div>
	<div class="small-12 medium-12 large-2 columns right-section">
		<div class="print-file-options clearfix">
      <% if (p.local_filename) { %>
        <% if (!p.local_only && queueAllowed) { %>
          <div class="loading-button add-to-queue columns small-9 medium-10 large-6">
            <a href="#" class="queue idle">
              <i class="icon-plus" title="Add to Queue"></i>
            </a>
            <span class="loading"><i class="icon-rocket-spinner animate-spin"></i></span>
          </div>
        <% } %>

        <div class="loading-button print columns small-3 medium-2 large-6">
          <a href="#" class="print idle">
            <i class="icon-3d-printer" title="Print"></i>
          </a>
          <span class="loading text-center"><i class="icon-rocket-spinner animate-spin"></i></span>
        </div>

			<% } else { %>
				<a href="#" class="download">
					<i class="icon-download-cloud" title="Download to {{mfDefinition.variant.product_name}}"></i>
				</a>
				<div class="download-progress">
					<a href="#" class="dw-cancel"><i class="icon-cancel-circled" title="Cancel download"></i></a>
					<span class="bold">0<i>%</i></span>
				</div>
        <div class="download-failed">
          <i class="icon-attention"></i>
        </div>
			<% } %>
		</div>
	</div>
</script>

<script type="text/template" id="usb-file-template">
  <div class="row inside-folder">
	  <div class="small-3 medium-2 large-1 columns left-section">
      <img class="noimage" src="/img/noimage.svg">
    </div>
    <div class="small-9 medium-6 large-8 columns middle-section div-container">
      <div class="info-container div-container">
        <h3 class="bold text"><%= name %></h3>
        <% if (size) { %><div class="info"><%= size_format(size) %></div><% } %>
      </div>
    </div>

    <div class="small-12 medium-4 large-3 columns right-section">

      <div class="loading-content"></div>

      <div class="print-file-options">
        <div class="loading-button print">
          <button href="#" class="tiny bold radius print idle">
            <i class="icon-3d-printer"></i>
          </button>
          <button href="#" class="tiny bold radius copy idle">
            copy to internal
          </button>
        </div>
      </div>
    </div>
  </div>
</script>

<div id="local-file-exists-dlg" class="reveal-modal xlarge" data-reveal>
	<div class="dlg-content"></div>
	<a class="close-reveal-modal">&#215;</a>
</div>

<div id="no-print-dlg" class="reveal-modal xlarge" data-reveal>
	<div class="dlg-content"></div>
	<a class="close-reveal-modal">&#215;</a>
</div>

<script type="text/template" id="no-print-template">
  <h2 class="bold">Not matching Printer</h2>
  <div class="modal-content" align="center">
    <p>Your printer model profile does not match the Printfile printer.</p>
    <p>Printfile printer model: <b><%=printFilePrinterName%></b></p>
    <p>AstroBox printer model: <b><%=astroboxPrinterName%></b></p>
  </div>
  <div class="row">
    <div class="loading-button close columns small-offset-4 small-4">
      <button href="#" class="radius secondary cancel">
        Cancel
      </button>
    </div>
  </div>
</script>

<script type="text/template" id="local-file-exists-template">
    <h2 class="bold">File is already in internal storage</h2>
    <div class="modal-content" align="center">
      <p>The file <b><%=filename%></b> is already in your internal storage. Replace it?</p>
    </div>
  </div>
  <div class="row">
    <div class="loading-button eject columns small-6">
      <button href="#" class="radius secondary cancel idle">
        Cancel
      </button>
      <span class="loading"><i class="icon-rocket-spinner animate-spin"></i></span>
    </div>
    <div class="loading-button eject columns small-6">
      <button href="#" class="radius alert right replace idle">
        Replace
      </button>
      <span class="loading"><i class="icon-rocket-spinner animate-spin"></i></span>
    </div>
</script>

<div id="eject-before-print-dlg" class="reveal-modal xlarge" data-reveal>
	<div class="dlg-content"></div>
	<a class="close-reveal-modal">&#215;</a>
</div>

<script type="text/template" id="eject-before-print-template">
  <h2 class="bold">Eject External Drive</h2>
  <div class="modal-content" align="center">
    <p>The external drive is not needed to complete the print. You will not be able to eject it during the print.</p>
    <p class="bold">Would you like to eject the external drive now?</p>
  </div>
  <div class="loading-button eject columns small-6">
    <button href="#" class="eject-no idle alert radius">
      No
    </button>
    <span class="loading"><i class="icon-rocket-spinner animate-spin"></i></span>
  </div>
  <div class="loading-button eject columns small-6">
    <button href="#" class="eject-yes idle radius">
      Yes
    </button>
    <span class="loading button disabled radius">
      <i class="icon-rocket-spinner animate-spin"></i> Ejecting...
    </span>
  </div>
</script>

<script type="text/template" id="copy-to-home-progress">
  <div class="progress-number"><%=progress%>%</div>

  <div class="progress small">
    <span class="meter" style="width: <%=progress%>%"></span>
  </div>
</script>

<script type="text/template" id="browsing-file-template">
  <div class="row usb-list">
    <div class="exploreFolder small-12 medium-9 large-10 columns">
      <div class="small-2 medium-2 large-1 columns left-section">
        <img src="/static/img/<%= p.icon %>-icon.svg" alt="<%= p.icon %> icon">
      </div>
      <div class="small-10 medium-10 large-11 columns middle-section div-container">
        <h3 class="bold text"><%= _.escape(p.name) %></h3>
      </div>
    </div>
    <% if (p.icon == 'usb'){ %>
      <div class="small-12 medium-3 large-2 columns right-section">
        <div class="print-file-options">
          <div class="loading-button eject">
            <button href="#" class="tiny button bold radius eject idle"><i class="icon-eject-alt"></i> EJECT</button>
            <span class="loading"><i class="icon-rocket-spinner animate-spin"></i></span>
          </div>
        </div>
      </div>
    <% } %>
  </div>
</script>

<script type="text/template" id="back-folder-template">
  <div class="row inside">
    <div class="small-12 large-12 columns exploreFolder ">
      <i class="icon-back"></i>
      <i class="icon-folder-open-empty"></i>
      <i class="icon-folder-empty"></i>
    </div>
  </div>
</script>
